<template>
    <div class="menu_preview_area">
        <div class="mobile_menu_preview" :style="{backgroundImage: 'url('+previewBg+')'}">
            <ul class="pre_menu_list" :style="{backgroundImage: 'url('+footerBg+')'}">
                <!--主菜单-->
                <li class="pre_menu_item pre_menu_link" 
                v-for="(menu,index) in menus" :key="index" 
                v-bind:class="{'size1of2':menus.length<=1,'size1of3':menus.length>=2,'current':menu.current}">
                    <a href="javascript:void(0);" v-on:click="choiseMenu(index)" class="pre_menu_link">
                        {{menu.name}}
                    </a>
                    <!--子菜单-->
                    <div class="sub_pre_menu_box" v-show="menu.sub_show">
                        <ul class="sub_pre_menu_list">
                            <li 
                            v-for="(sub,sub_index) in menu.sub_button" 
                            v-bind:class="{'current':sub.current}"
                            v-on:click="choiseChild(index,sub_index)"
                            :key="sub_index">
                                <span class="sub_pre_menu_inner js_sub_pre_menu_inner">{{sub.name}}</span>
                            </li>
                            <!--子菜单添加-->
                            <li class="js_addMenuBox" v-show="menu.sub_button.length<5"> 
                                <a v-if="$store.getters.per.wechat_function_menu_create" href="javascript:void(0);" class="jsSubView js_addL2Btn" v-on:click="addChild(index)" >
                                    <span class="sub_pre_menu_inner js_sub_pre_menu_inner">
                                    <Icon type="plus" size="20"></Icon>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <i class="arrow arrow_out"></i>
                        <i class="arrow arrow_in"></i>
                    </div>
                </li>
                <!--主菜单添加-->
                <li 
                v-if="$store.getters.per.wechat_function_menu_create"
                v-show="menus.length<3" 
                class="pre_menu_item" 
                v-bind:class="{'size1of1 current':menus.length==0,'size1of2':menus.length==1,'size1of3':menus.length==2}">
                    <a href="javascript:void(0);" class="pre_menu_link js_addL1Btn" v-on:click="addMenu">
                        <Icon type="plus"></Icon><span v-show="menus.length==0">添加菜单</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
	
</template>
<script>
	import Icon from 'iview/src/components/icon'

	export default{
        props:{
            menus :{
                type : Array,
            },
            //点击主菜单
            clickMenu:{
                type: Function,
            },
            //添加主菜单
            clickAddMenu:{
                type: Function,
            },
            //点击子菜单
            clickChild:{
                type: Function,
            },
            //添加子菜单
            clickAddChild:{
                type: Function,
            },
        },
		components:{
			Icon,
        },
        data () {
            return {
            	previewBg : require('admin/assets/images/menu_head.png'),
            	footerBg : require('admin/assets/images/menu_foot.png'),
            }
        },
        methods:{
            //选择一个主菜单
        	choiseMenu(index){
        		this.clickMenu(index);
        	},
            //选择一个子菜单
            choiseChild(index,child_index){
                this.clickChild(index,child_index);
            },
            //添加一个主菜单
        	addMenu(){
        		this.clickAddMenu();
        	},
            //添加一个子菜单
            addChild(index){
                this.clickAddChild(index);
            }
        }
	}
</script>
<style>
	.mobile_menu_preview{position: relative; width: 317px; height: 580px;background: transparent no-repeat 0 0; background-position: 0 0; border: 1px solid #e7e7eb;}
	.menu_preview_area .pre_menu_list {position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid #e7e7eb; background: transparent  no-repeat 0 0; background-position: 0 0; background-repeat: no-repeat; padding-left: 43px; }
	.menu_preview_area .pre_menu_item {height: 50px; }
    .pre_menu_item {position: relative; float: left; height: 38px; text-align: center; }
    .size1of3 {width: 33.33%; }
    .size1of2{width: 50%;}
    .size1of1{width: 100%;}
    .menu_preview_area .pre_menu_item.current .pre_menu_link {border: 1px solid #44b549; line-height: 48px; background-color: #fff; color: #44b549; }
    .pre_menu_item a {display: block; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; color: #616161; text-decoration: none; height: 50px}
    .menu_preview_area .sub_pre_menu_box {bottom: 60px; background-color: #fafafa; border-top-width: 0; }
    .sub_pre_menu_box {position: absolute; bottom: 50px; left: 0; width: 100%; border: 1px solid #d0d0d0; background-color: #fff; }
    .menu_preview_area .pre_menu_item {line-height: 50px; }
    .menu_preview_area .sub_pre_menu_list li:first-child {border-top: 1px solid #d0d0d0; }
    .menu_preview_area .sub_pre_menu_list li {height: 44px; border: 1px solid transparent; margin: 0 -1px -1px; }
    .menu_preview_area .sub_pre_menu_list li:first-child .sub_pre_menu_inner {border-top-width: 0; }
    .menu_preview_area .sub_pre_menu_inner {display: block; border-top: 1px solid #e7e7eb; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; cursor: pointer; }
    .sub_pre_menu_box .arrow_out {bottom: -6px; display: inline-block; width: 0; height: 0; border-width: 6px; border-style: dashed; border-color: transparent; border-bottom-width: 0; border-top-color: #d0d0d0; border-top-style: solid; }
    .sub_pre_menu_box .arrow_in {bottom: -5px; display: inline-block; width: 0; height: 0; border-width: 6px; border-style: dashed; border-color: transparent; border-bottom-width: 0; border-top-color: #fafafa; border-top-style: solid; }
    .sub_pre_menu_box .arrow {position: absolute; left: 50%; margin-left: -6px; }
    .menu_preview_area .pre_menu_list.no_menu .pre_menu_item .pre_menu_link {border: 1px solid #44b549; color: #44b549; }
    .menu_preview_area .sub_pre_menu_list li.current {background-color: #fff; border: 1px solid #44b549; position: relative; z-index: 1; line-height: 45px; }
    .sub_pre_menu_list li a {padding: 0 .5em; }
    .menu_preview_area .sub_pre_menu_list li.current .sub_pre_menu_inner {border-top-width: 0; }
    .pre_menu_link {border-left: 1px solid #e7e7eb; }
</style>